<template>
	<div>
		<el-dialog
			title="俱乐部审核二次确认"
			:visible="dialogVisible"
			width="800px"
			center
			:before-close="handleClose"
			@close="handleClose"
		>
			<div
				v-loading="dialogLoading"
				element-loading-spinner="el-icon-loading"
				class="club-detail-content"
			>
				<el-row class="content-space">
					<el-col :span="12">
						申请人账号：{{ clubDetail.applyName }}
					</el-col>
					<el-col :span="12">
						所属总代账号：{{ clubDetail.topProxyName }}
					</el-col>
				</el-row>

				<el-row class="content-space">
					俱乐部名称：{{ clubDetail.clubName }}
				</el-row>

				<el-row class="content-space">
					<div class="show-avatar-content">
						俱乐部头像：
						<span class="show-image-content">
							<el-image
								:src="clubDetail.iconUrl"
								class="show-avatar"
								style="width: 150px; height: 150px"
								fit="contain"
							/>
						</span>
					</div>
				</el-row>

				<el-row class="content-space">
					<div class="show-remark-content ">
						俱乐部介绍：
						<span class="show-remark ">
							{{ clubDetail.introduction }}
						</span>
					</div>
				</el-row>

				<el-row class="content-space">
					已创建俱乐部数量：0个
				</el-row>

				<el-row class="content-space">
					<div class="audit-title">
						<i class="el-icon-warning icon-warning"></i>
						是否要“{{ auditTitle }}”该俱乐部
					</div>
				</el-row>

				<el-row>
					<div class="show-button">
						<el-button @click="handleClose">
							{{ $t('common.cancel') }}
						</el-button>
						<el-button
							type="primary"
							:loading="dialogLoading"
							@click="handleConfirm"
						>
							{{ $t('common.confirm') }}
						</el-button>
					</div>
				</el-row>
			</div>
		</el-dialog>
		<ClubAudit
			:auditVisible.sync="auditVisible"
			:auditStatus="auditStatus"
			@applyClub="applyClub"
		/>
	</div>
</template>

<script>
import list from '@/mixins/list'
import ClubAudit from '../ClubAudit'

export default {
	components: {
		ClubAudit
	},
	mixins: [list],
	props: {
		dialogVisible: {
			type: Boolean,
			default: false
		},
		dialogLoading: {
			type: Boolean,
			default: false
		},
		auditStatus: {
			type: Number,
			default: 0
		},
		clubDetail: {
			type: Object,
			default: () => {}
		}
	},
	data() {
		return {
			auditVisible: false
		}
	},
	computed: {
		auditTitle() {
			if (this.auditStatus === 1) {
				return '审核通过'
			} else {
				return '审核拒绝'
			}
		}
	},
	methods: {
		applyClub(auditStatus, remark) {
			// 锁单+审核
			const auditClubParam = {
				id: this.clubDetail.id,
				auditStatus: auditStatus === 1 ? 1 : 2, // 审核状态
				remark: remark
			}
			this.$api
				.clubManageLockAndAudit(auditClubParam)
				.then((res) => {
					if (res?.code === 200) {
						// 重新渲染数据
						this.$emit('update:dialogVisible', false)
						this.$emit('loadData')
					}
				})
				.catch(() => {})
		},
		handleConfirm() {
			this.auditVisible = true
		},
		// 关闭
		handleClose() {
			this.$emit('update:dialogVisible', false)
		}
	}
}
</script>

<style lang="scss" scoped>
.club-detail-content {
	font-size: 16px;
	color: black;
	font-weight: bold;
	.content-space {
		margin-bottom: 20px;
	}
	.audit-title {
		color: red;
		font-size: 16px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.show-avatar-content {
		.show-image-content {
			vertical-align: top;
		}
	}

	::v-deep .show-avatar {
		img {
			width: 100%;
			height: 100%;
		}
	}

	.show-remark-content {
		position: relative;
		width: 100%;
		.show-remark {
			word-wrap: break-word;
			vertical-align: top;
			color: gray;
			font-weight: normal;
			font-size: 14px;
		}
	}
	.show-button {
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
</style>
